@extends('layouts.app')
@section('title', '商品列表')

@section('content')
  <div class="row">
    <div class="col-lg-10 offset-lg-1">
      <div class="card">
        <div class="card-body">

          {{-- 筛选 --}}
          <form action="{{ route('products.index') }}" class="search-form">
            <div class="form-row">
               {{-- 筛选内容 --}}
              <div class="col-md-9">
                <div class="form-row">
                  <div class="col-auto">
                    <input type="text" name="search" class="form-control form-control-sm" placeholder="搜索">
                  </div>
                  <div class="col-auto">
                    <button class="btn btn-primary btn-sm">搜索</button>
                  </div>
                </div> 
              </div>
                {{-- 排序条件 --}}
              <div class="col-md-3">
                <select name="order" class="form-control form-control-sm float-right">
                  <option value="">排序方式</option>
                  <option value="price_asc">价格从低到高</option>
                  <option value="price_desc">价格从高到低</option>
                  <option value="sold_count_desc">销量从高到低</option>
                  <option value="sold_count_asc">销量从低到高</option>
                  <option value="rating_desc">评价从高到低</option>
                  <option value="rating_asc">评价从低到高</option>
                </select>
              </div>
            </div>
            
          </form>

          {{-- 产品列表 --}}
          <div class="row products-list">
            @foreach($products as $product)
              <div class="col-3 product-item">
                <div class="product-content">
                  <div class="top">
                    <div class="img">
                      <a href="{{ route('products.show',['product'=>$product->id]) }}">
                        <img src="{{ $product->image_url }}" alt="">
                      </a>
                    </div>
                    <div class="price"><b>￥</b>{{ $product->price }}</div>
                    <div class="title">
                      <a href="{{ route('products.show', ['product' => $product->id]) }}">
                        {{ $product->title }}
                      </a>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="sold_count">销量 <span>{{ $product->sold_count }}笔</span></div>
                    <div class="review_count">评价 <span>{{ $product->review_count }}</span></div>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
          {{-- 查询条件维持带上 --}}
          <div class="float-right">{{ $products->appends($filters)->render() }}</div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scriptsAfterJs')
<script>
  var filters = {!! json_encode($filters) !!}
  $(document).ready(function(){
    // 维护初始查询条件，并在页面加载完毕后填充，同时设置排序事件监听器
    $('.search-form input[name=search]').val(filters.search)
    $('.search-form select[name=order]').val(filters.order)
    $('.search-form select[name=order]').on('change',function(){
      $('.search-form').submit()
    })
  })
</script>
@endsection